import React from 'react'
import './index.styl'
export function Index(props) {
  let newsItem = props.news
  return (
    <div className="news-item" 
    onClick={()=>props.toNewsDetail(newsItem.id)}>
      <div className="head">
        <span className="title">{newsItem.title}</span>
        <span className="create-time">{newsItem.createTime}</span>
        <span className="creator">{newsItem.creator}</span>
        <span className="fsource">{newsItem.fsource}</span>
      </div>
      <div className="body">
        <img src={newsItem.imageUrl} alt=""/>
        <div className="content">{newsItem.content}</div>
      </div>
    </div>
  )
}

export function NewsList(props) {

  function toNewsDetail(id) {
    props.newsDetailHandler(id)
  }

  return (
    <ul className="news-container">
      {
        props.newsList.map(item=>(
          <div key={item.typeid}>
            <div className="news-type-name">{item.type}</div>
            {
              item.news.map(newsItem=>
                <Index news={newsItem} key={newsItem.id}
                toNewsDetail={toNewsDetail}/>
              )
            }
          </div>
        ))
      }
    </ul>
  )
}